<template>
  <div>
    <el-row gutter="40">
      <el-col :span="6" v-for="(item) in items" :key="item">
        <el-card :body-style="{ padding: '0px' }" >
          <el-image   :src="item.video_img"  @click="linkToVideo(item)"></el-image>
          <div style="padding: 5px; text-align: left">
            <span style="font-weight: 700">{{item.video_vname}}</span><br>
            <el-tag size="mini">   <i class="el-icon-user"></i>{{ item.video_uid }}</el-tag>
<!--            <div>-->
<!--              <el-badge value="new" class="item">-->
<!--                <el-button size="small">评论</el-button>-->
<!--              </el-badge>-->
<!--              <el-badge value="hot" class="item">-->
<!--                <el-button size="small">回复</el-button>-->
<!--              </el-badge>-->
<!--            </div>-->
            <div class="time">
              <i class="el-icon-time"></i> {{ item.video_timestamp }}
            </div>
            <div class="time">
              <i class="el-icon-view"></i> {{ item.video_vv }}
              <i class="el-icon-thumb"></i> {{ item.video_like }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  <div style="margin-top: 30px;">
    <el-pagination
        background
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total">
    </el-pagination>
  </div>
  </div>
</template>

<script>
export default {
  name: "UserVideo",
  data() {
    return {
      currentDate: new Date(),

      items: [],

      ip: this.GLOBAL.ip,
      port: this.GLOBAL.port,
      pageNum: 1,
      pageSize: 1,
      pageTotal: 1,
      total: 1,
      video_vname: "",
      video_uid: "",

      videoIndex : '',

    };

  },
  methods: {
    searchVideo: function (pageNum, video_vname, video_uid) {
      var that = this;
      // console.log("http://"+that.GLOBAL.ip+":"+that.GLOBAL.port+"/video/main?pageNum=" + pageNum + "&video_vname=" + video_vname + "&video_uid=" + video_uid);
      this.$http.get("http://" + that.ip + ":" + that.port + "/video/main?pageNum=" + pageNum + "&video_vname=" + video_vname + "&video_uid=" + video_uid)

          .then(function (response) {
            console.log(response.data.list);
            that.items = response.data.list;
            that.total = response.data.total;
            that.pageNum = response.data.pageNum;
            that.pageSize = response.data.pageSize;
            that.pageTotal = response.data.pageTotal;
          })
          .catch(function (err) {
            console.log(err);
            this.$message.error(
                err);
          });

    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.searchVideo(val, this.video_vname, this.video_uid);
    },

    linkToVideo(item){
      this.$router.push({path:'/index/pageVideo',query:{item:item,items:this.items}});
    }
  },
  created() {
    this.searchVideo(1, this.video_vname, this.video_uid);
  },

}
</script>

<style scoped>
.el-header {
  background-color: rgba(154, 191, 153, 0);
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #E9EEF300;
  color: #333;
  text-align: center;
  /*width: 80%;*/
  padding-left: 10%;
  padding-right: 10%;
  /*line-height: 200px;*/
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {

  display: block;
  max-width: 70%;
  max-height: 70%;

}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.bg-purple-dark {
  background: #99a9bf00;
}

.item {
  margin-top: 10px;
  margin-right: 40px;
}

.el-carousel__item h3 {
  color: rgba(72, 61, 139, 0);
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: rgba(102, 51, 153, 0);
}

.el-carousel__item:nth-child(2n+1) {
  background-color: rgba(0, 100, 25, 0);
}
</style>